<template>
  <div class="questions-new-container">
    <el-card style="margin:20px">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form :rules="rules">
        <!-- 选择框 -->
        <!-- 学科条框 -->
        <el-form-item :model="reqParmas" label="学科：" label-width="10%" prop="subject">
          <el-select v-model="reqParmas.subjectID" @change="handelSubject" clearable placeholder="请选择" style="width: 30%">
            <el-option v-for="item in subjectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录条框 -->
        <el-form-item  label="目录：" label-width="10%" prop="directory">
          <el-select v-model="reqParmas.catalogID" @change="handelDir" clearable placeholder="请选择" style="width: 30%">
            <el-option v-for="item in dirOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业条框 -->
        <el-form-item label="企业：" label-width="10%" prop="companys">
          <el-select v-model="reqParmas.enterpriseID" @change="handleEnterpriseID" clearable placeholder="请选择" style="width: 30%">
            <el-option v-for="item in companyOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 省 条框 -->
        <el-form-item label="城市：" label-width="10%" prop="province">
          <el-select class="filter-item" style="width: 157px" v-model="reqParmas.province" @keyup.enter="handleFilter" @change="handleProvince" filterable>
            <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select class="filter-item" style="width: 157px" v-model="reqParmas.city" @keyup.enter="handleFilter" @change="handleCity" filterable>
            <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 条框 -->
        <el-form-item label="方向：" label-width="10%"
        prop="direction">
          <el-select v-model="reqParmas.direction" clearable @change="reqParmas.direction = $event" placeholder="请选择" style="width: 30%">
            <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <!-- 选择按钮 -->

        <!-- 题型  -->
        <el-form-item label="题型：" label-width="10%"
        prop="questionType">
          <el-radio-group v-model="reqParmas.questionType">
            <el-radio style="margin-right: 10px" v-for="(item, index) in questionType" :key="index" @change="handelSingle" :label="item.value + ''">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度：" label-width="10%"
        prop="difficulity">
          <el-radio-group v-model="reqParmas.difficulty">
            <el-radio style="margin-right: 10px" v-for="(item, index) in difficulty" :key="index" @change="handleDiff" :label="item.value + ''">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 富文本编辑器 -->
        <el-form-item label="题干：" label-width="10%" prop="question">
          <quill-editor v-model="reqParmas.question" :options="editorOption" style="width: 90%"></quill-editor>
        </el-form-item>

        <!-- 选项 -->
        <el-form-item class="questionStem" v-show="isOpeionsShow" label="选项：" label-width="10%">
          <div class="option_item" v-for="(item, index) in questionsOptinos" :key="index">
            <!-- 单选 -->
            <el-radio style="margin-right: 5px" v-show="isRadioShow" v-model="isRadioed" @change="handelradioChange(index, $event)" :label="String.fromCharCode(item)"></el-radio>
            <!-- 多选 -->
            <el-checkbox v-show="isCheckBoxShow" v-model="isCheckList" @change="handelcheckChange(index, $event)" :label="String.fromCharCode(item)"></el-checkbox>
            <!-- 简答 -->
            <el-input :value="reqParmas.options[index].title" style="width: 30%" placeholder="请输入内容" @input="handleTitle(index, $event)" clearable> </el-input>
            <!-- 上传图片 -->
            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <span class="uploadimg">上传图片</span>
            </el-upload>
            <!-- 图片弹框 -->
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="reqParmas.img" alt="" />
            </el-dialog>
          </div>
        </el-form-item>
        <!-- 增加选项与答案 -->
        <el-form-item label-width="10%">
          <el-button type="danger" v-show="isBtnShow" :disabled="isBtnDisable" @click="addOptions">+增加选项与答案</el-button>
        </el-form-item>
        <!-- 视频解析地址 -->
        <el-form-item label="解析视频地址" label-width="10%" prop="videoURL">
          <el-input placeholder="请输入解析视频地址" v-model="reqParmas.videoURL" clearable style="width: 30%"> </el-input>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析：" label-width="10%" prop="answer">
          <quill-editor :options="editorOption" v-model="reqParmas.answer"></quill-editor>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注：" label-width="10%">
          <el-input style="width: 30%" type="textarea" v-model="reqParmas.remarks"></el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签" label-width="10%">
          <el-select style="width: 30%" v-model="reqParmas.tags" multiple filterable allow-create default-first-option @change="handelTagsChange" placeholder="请选择">
            <el-option v-for="(item, index) in tagsOptinos" :key="index" :label="item.label" :value="item.label"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 确认提交 -->
        <el-form-item v-if="isSubmit" label-width="10%">
          <el-button type="primary" @click="Submit">确认提交</el-button>
        </el-form-item>
        <!-- 确认修改 -->
        <el-form-item v-else label-width="10%">
          <el-button type="success" @click="Update">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { simple as dirSimple } from '@/api/hmmm/directorys'
import { simple as subSimple } from '@/api/hmmm/subjects'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { list as companysList } from '@/api/hmmm/companys'
// 导入省份城市列表
import { provinces, citys } from '@/api/hmmm/citys.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { add as addQuestion, detail as detailQuestion, update as updateQuestion } from '@/api/hmmm/questions'
import { validateURL } from '@/utils/validate'
export default {
  components: {},
  props: {},
  data () {
    const validateUrl = (rule, value, callback) => {
      if (!validateURL(this.reqParmas.videoURL)) {
        callback(new Error('请输入正确的视频地址'))
      } else {
        callback()
      }
    }
    return {
      // “学科”数组
      subjectOptions: [],
      // “目录”数组
      dirOptions: [],
      // “学科”数组
      companyOptions: [],
      // 城市列表
      citySelect: {
        // 省份列表
        province: [],
        // 城市列表
        cityDate: [],
      },
        isSubmit: true,
      // 题干外div盒子循环数组
      questionsOptinos: [ 65 ,66 ,67 ,68],
      // tag标签循环数组
      tagsOptinos: [],
      // 富文本编辑器修改
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['link', 'image'] // 链接、图片
          ] // 工具菜单栏配置
        },
        placeholder: '请输入内容' // 提示
      },
      // 正则校验
      rules: {
        subject: [{ required: true, message: '学科不能为空', trigger: 'blur' }],
        directory: [{ required: true, message: '目录不能为空', trigger: 'blur' }],
        companys: [{ required: true, message: '企业不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '省不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '市不能为空', trigger: 'blur' }],
        direction: [{ required: true, message: '方向不能为空', trigger: 'blur' }],
        questionType: [{ required: true, message: '题型不能为空', trigger: 'blur' }],
        difficulity: [{ required: true, message: '难度不能为空', trigger: 'blur' }],
        question: [{ required: true, message: '题干不能为空', trigger: 'blur' }],
        answer: [{ required: true, message: '答案不能为空', trigger: 'blur' }],
        videoURL: [{ required: true, validator: validateUrl, trigger: 'blur' }]
      },
      // 请求参数
      reqParmas: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            // 选项 数组里有对象
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否为正确答案
          },
          {
            // 选项 数组里有对象
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否为正确答案
          },
          {
            // 选项 数组里有对象
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否为正确答案
          },
          {
            // 选项 数组里有对象
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否为正确答案
          }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: '',
        isPrefect: false
      },
      // 单选框是否显示
      isRadioShow: true,
      // 单选框动态数据绑定
      isRadioed: false,
      // 多选是否显示
      isCheckBoxShow: false,
      // 是否显示复选框列表
      isCheckList: [],
      // 选项列表是否显示
      isOpeionsShow: true,
      // 增加按钮开关
      isBtnDisable: true,
      // 增加按钮显示
      isBtnShow: true,
      // 图片弹框dialog
      dialogVisible: false,
    }
  },
  computed: {
    direction() {
      return direction
    },
    questionType() {
      return questionType
    },
    difficulty() {
      return difficulty
    },
  },
  created() {
    this.Loading()
    if (this.$route.query.id) {
      console.log(this.$route.query.id)
      this.editQuestions()
    }
  },

  methods: {
    async editQuestions() {
      const { data: resq } = await detailQuestion({ id: this.$route.query.id })
      this.tagstemp = resq.tags
      resq.tags = resq.tags.split(',')
      resq.options = resq.options.map(item => {
        item.isRight = item.isRight === 0 && true
        return item
      })
      // console.log(resq)
      this.reqParmas = resq
      this.isSubmit = false
    },
    handelSubject (e) {
      // e是当前学科的id item.value
      console.log(e)
      this.reqParmas.subjectID = e - 0
      // 获取学科对应的目录
      this.getDirData(e)
    },
    handelDir(e) {
      this.reqParmas.catalogID = e - 0
      // 获取目录对应的标签 传递学科id
      this.getTagsData(e)
    },
    // 获取试题标签
    async getTagsData(e) {
      const { data: resTags } = await simpleTags(e)
      this.tagsOptinos = resTags
    },
    // tag标签绑定监听事件
    handelTagsChange(e) {
      this.reqParmas.tags = e
      this.tagstemp = e.join()
    },
    async getDirData (e) {
      const { data: resDir } = await dirSimple({ subjectID: e })
      console.log(resDir)
      this.dirOptions = resDir
    },
    async getSubData(id) {
      const { data: subRes } = await subSimple()
      this.subjectOptions = subRes

      // console.log(subRes) // 数组里有对象 对象有value
    },
    async Loading() {
      // 把学科id改成
      this.getSubData()
      this.getCityData()
      this.getCompanys()
    },
    // 获取企业列表
    async getCompanys() {
      const { data: companys } = await companysList()
      // console.log(companys)
      companys.items.forEach((item, index) => {
        console.log(item.shortName)
        this.companyOptions.push({ label: item.shortName, value: item.id })
      })
      console.log(this.companyOptions)
    },
    handleEnterpriseID(e) {
      console.log(e)
      this.reqParmas.enterpriseID = e
    },
    // 获取省
    getCityData() {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince(e) {
      this.citySelect.cityDate = citys(e)
      console.log(this.reqParmas)
      this.handleCity('')
    },
    handleCity(e) {
      this.reqParmas.city = e
    },
    // 难度绑定监听事件
    handleDiff(e) {
      this.reqParmas.difficulty = e
      // console.log(this.reqParmas.difficulty)
    },
    // 单选框监听change事件
    handelradioChange(index, e) {
      // 如果当前被选中
      this.reqParmas.options[index].isRight = true
      // code是啥
      this.reqParmas.options[index].code = e
      console.log(this.reqParmas.options)
      // vm.options.splice(4)
    },
    // 多选框监听change事件
    handelcheckChange(index, e) {
      // 如果当前被选中
      this.reqParmas.options[index].isRight = true
      // code是啥
      this.reqParmas.options[index].code = e
    },
    // 简答题input框监听
    handleTitle(index, e) {
      this.reqParmas.options[index].title = e
      // console.log(e)
    },
    // 选项框（单选，多选，简答）绑定监听事件
    handelSingle(e) {
      this.reqParmas.questionType = e
      // console.log(e, this.reqParmas)
      // 单选 显示四个选项 按钮禁用
      // 多选
      // 简答  隐藏这个模块
      this.questionsOptinos = [65,66,67,68]
      if (e === '1') {
        this.isBtnShow = true
        this.isOpeionsShow = true
        this.isBtnDisable = true
        this.isCheckBoxShow = false
        this.isRadioShow = true
      } else if (e === '2') {
        // 框变成方的 按钮
        this.isBtnShow = true
        this.isOpeionsShow = true
        this.isBtnDisable = false
        this.isCheckBoxShow = true
        this.isRadioShow = false
      } else if (e === '3') {
        this.isOpeionsShow = false
        this.isBtnShow = false
      }
    },
    // 点击添加按钮发生事件
    addOptions () {
      const len = this.questionsOptinos.length
      const e = this.questionsOptinos[len - 1]
      this.questionsOptinos.push(e + 1)
      this.reqParmas.options.push({
        code: '',
        title: '',
        img: '',
        isRight: false
      })
    },
    removeOptions () {
      this.reqParmas.options.splice(4)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.reqParmas.img = file.url
      this.dialogVisible = true
    },
    // 文件列表移除文件时的钩子
    // 图片
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    // 点击确认提交
    async Submit() {
      this.reqParmas.tags = this.tagstemp
      // console.log(this.reqParmas)
      await this.$confirm('确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await addQuestion(this.reqParmas)
        this.$message.success('已成功' + status + '!')
        this.$router.push('/questions/list')
      } catch (error) {
        this.$message.error('失败')
      }
    },
    // 点击确认修改
    async Update() {
      this.reqParmas.tags = this.tagstemp
      console.log(this.tagstemp)
      this.reqParmas.questionType = "1"
      this.reqParmas.difficulty = "1"
      // console.log(this.reqParmas)
      await this.$confirm('确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await updateQuestion(this.reqParmas)
        this.$router.push('/questions/list')
        this.$message.success('已修改' + status + '!')
      } catch (error) {
        this.$message.error('失败')
      }
    }
  }
}
</script>

<style scoped lang='less'>
#filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}
/deep/ .ql-editor {
  height: 200px;
}
.questionStem {
  margin-top: 60px;
}
.option_item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
/deep/ .el-upload {
  width: 100px;
  height: 60px;
  margin-left: 15px;
  /deep/ .uploadimg {
    display: block;
    height: 60px;
    line-height: 60px;
  }
}
/deep/ .el-radio {
  margin: 0;
}
</style>
